<template>
  <div class="main">
    <div class="msg base">
      <div class="part">
        <div class="sale lef">销售姓名:{{ data.Sales_name }}</div>
        <div class="number lef">手机号:{{ data.phone }}</div>
      </div>

      <div class="part">
        <div class="name lef">名称：{{ data.Company }}</div>
        <div class="contacts lef">联系人手机号:{{ data.sales_calls }}</div>
      </div>

      <div class="part part3">
        <div class="legal lef">法人名称:{{ data.contactsName }}</div>
        <div class="code lef">统一社会信用代码:{{ data.Sociai_Credit }}</div>
      </div>

      <div class="part part3">
        <div class="id lef">法人省份证号码:{{ data.identity_card }}</div>
        <div class="business lef">
          营业执照招聘:<img :src="data.Business_license" />
        </div>
      </div>
    </div>

    <div class="sale-num base">
      <div class="part ani">
        <div>虚拟卡销售张数(张)</div>
        {{ num1 }}
      </div>
      <div class="part ani">
        <div>实体卡销售张数(张)</div>
        {{ num2 }}
      </div>
      <div class="part ani">
        <div>激活数量(张):0</div>
        激活比率:0%
      </div>
      <div class="part ani">
        <div>问诊次数(张):0</div>
        问诊比率:0%
      </div>
    </div>

    <div class="content">
      <div class="time lef">
        <div class="block">
          <span class="demonstration">选择时间:</span>
          <el-date-picker
            v-model="value1"
            type="daterange"


            
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </div>
      </div>

      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="虚拟卡订单" name="first"> <Vir /> </el-tab-pane>
        <el-tab-pane label="实体卡订单" name="second">
          <Physical />
        </el-tab-pane>
        <el-tab-pane label="团队人员" name="third"> <Team /> </el-tab-pane>
      </el-tabs>







      <router-view></router-view>
    </div>
  </div>
</template>

<script>
import Vir from "../../components/list/Virtual";
import Physical from "../../components/list/Physical";
import Team from "../../components/list/Teammembers";
import { GetDetailMsg } from "../../api/bigcustomer";
import { SerchOrder } from "../../api/bigcustomer";
import { Bus } from "../../Bus/index";
export default {
  props: [],
  components: {
    Vir,
    Physical,
    Team,
  },
  data() {
    return {
      dateParams: {
        startTime: "",
        endTime: "",
      },
      num1: 0,
      num2: 0,
      value1: "",
      activeName: "first",
      id: "",
      data: [],
      datas: [],
      orderdata:[],
      isShow: false,
      listshow: true,
      th: [
        "订单编号",
        "姓名",
        "单位",
        "创建时间",
        "数量(张)",
        "单价(元)",
        "金额",
        "支付方式",
        "订单状态",
        "操作",
      ],
    };
  },
  //获取详细信息
  mounted() {

    GetDetailMsg({ _id: this.$route.query._id }).then((res) => {
      this.data = res.data.keyAccount;
      this.orderdata=res.orderList
      // console.log(res,res.data.orderList);
      Bus.$emit('cardsmsg',res.data.orderList)




      // localStorage.keyAccount = JSON.stringify(res.data.keyAccount);
    });

    Bus.$on("virtualnum", (num1, num2) => {
      this.num1 = num1;
      this.num2 = num2;
    });

    Bus.$on("resetzero", (zero) => {
      this.value1 = zero;
    });
  },
  methods: {
    show() {
      this.$store.commit("changeOrder");
    },
    handleClick(tab, event) {
      // console.log(tab, event);
    },
  },
  watch: {
    value1() {
      this.value1.forEach((element) => {
        element = new Date(
          this.dayjs(element).format("YYYY-MM-DD HH:mm:ss")
        ).getTime();
      });
      //获取日期
      this.value1[0] = new Date(
        this.dayjs(this.value1[0]).format("YYYY-MM-DD HH:mm:ss")
      ).getTime();
      this.value1[1] = new Date(
        this.dayjs(this.value1[1]).format("YYYY-MM-DD HH:mm:ss")
      ).getTime();
      this.dateParams.startTime = this.value1[0];
      this.dateParams.endTime = this.value1[1];

      //筛选符合日期的订单
      SerchOrder({
        name: this.data.Sales_name,
        dateParams: this.dateParams,
      }).then((res) => {
        let card1 = [];
        let card2 = [];
        this.datas = res.data;
         
        this.datas.forEach((el, idx) => {
            if (el.card_type == "实体卡") {
            card2.push(el);
          }
          if (el.card_type == "虚拟卡") {
            card1.push(el);
          }
          if (idx == this.datas.length - 1) {
            Bus.$emit("serchorder", card1, card2);
          }
        });
      });
    },
  },
};
</script>

<style scoped lang='less'>
.base {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.lef {
  display: flex;
  justify-content: left;
}
.part3.part3 {
  width: 350px;
}
.code {
  width: 400px;
}
.part {
  width: 250px;
  height: 80px;
  div {
    width: inherit;
    height: 40px;
  }
}
.ani:hover {
  //  box-shadow:0 0 1px #000 inset;
  box-shadow: 0px 0px 10px #dcdcdc;
}
.msg {
  width: inherit;
  padding: 20px;
  height: 60px;
}
.sale-num {
  width: inherit;
  padding: 20px 0;
  padding-right: 300px;
  font-weight: 700;
}
.content {
  padding: 0 20px;
}
.date {
  width: 200px;
  height: 20px;
  line-height: 20px;
  margin-left: 10px;
  color: #c2c2c6;
  border: 1px solid #c2c2c6;
}
.order {
  font-weight: 600;
  font-size: 18px;
  width: 300px;
  height: 40px;
  padding: 10px 0;
}
.order > div {
  cursor: pointer;
}
.bule {
  color: #037fe9;
  border-bottom: 3px solid #037fe9;
}

.into:hover {
  color: #1065a6;
}

.import {
  width: 150px;
  height: 30px;
  line-height: 30px;
  background-color: #0076d7;
  color: #bee4e4;
  border-radius: 2px;
  margin: 10px 0;
}

.see {
  cursor: pointer;
}

.name {
  width: 200px;
}
.time {
  width: 510px;
}
</style>